<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TodoMVC-任务管理</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
    <!-- CSS overrides - remove if you don't need it -->
    <link rel="stylesheet" href="css/app.css" />
  </head>
  <body>
    <div id="app">
      <section class="todoapp">
        <header class="header">
          <h1>todos</h1>
          <input
            class="new-todo"
            placeholder="今天你的任务是?"
            v-focus
            @keyup.13="addTask"
            v-model.trim="text"
          />
        </header>
        <!-- This section should be hidden by default and shown when there are todos -->
        <section class="main">
          <!-- 全选和反选 -->
          <input
            id="toggle-all"
            class="toggle-all"
            type="checkbox"
            v-model="allcheck"
          />
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
            <!-- These are here just to show the structure of the list items -->
            <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
            <!-- 1.数据列表渲染 -->
            <li
              v-for="(item, index) in filter"
              :class="{completed:item.completed,editing:index==currenIndex}"
              @dblclick="currenIndex=index"
            >
              <div class="view">
                <input
                  class="toggle"
                  type="checkbox"
                  v-model="item.completed"
                />
                <label>{{ item.title }}</label>
                <button class="destroy" @click="delTask(index)"></button>
              </div>
              <!-- 编辑表单 记住这个坑-->
              <input
                class="edit"
                v-model="item.title"
                autofocus
                @keyup.13="$event.target.blur"
                @blur="editTask(index)"
                v-focus2
              />
            </li>
            <!-- <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Buy a unicorn</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Rule the web" />
          </li> -->
          </ul>
        </section>
        <!-- This footer should hidden by default and shown when there are todos -->
        <footer class="footer">
          <!-- This should be `0 items left` by default -->
          <span class="todo-count"
            ><strong>{{ total() }}</strong> {{total() == 1 ? 'item' : 'items'}}
            left</span
          >
          <!-- Remove this if you don't implement routing -->
          <ul class="filters">
            <li>
              <a :class="{selected:hash==''}" href="#/">All</a>
            </li>
            <li>
              <a :class="{selected:hash=='active'}" href="#/active">Active</a>
            </li>
            <li>
              <a :class="{selected:hash=='completed'}" href="#/completed"
                >Completed</a
              >
            </li>
          </ul>
          <!-- Hidden if no completed items are left ↓ -->
          <!-- 清除多条已完成的任务 -->
          <button class="clear-completed" @click="delAll">
            Clear completed
          </button>
        </footer>
      </section>
      <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="http://todomvc.com">you</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
      </footer>
    </div>

    <!-- Scripts here. Don't remove ↓ -->
    <script src="node_modules/todomvc-common/base.js"></script>
    <script src="./js/vue.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
